<template>
  <div class="login-container">
    <div class="login-box">
      <img src=http://java-admin.likeadmin.cn/adminapi/static/login_image.png>
      <div class="formBox">
        <div class="containerTitle">likeadmin开源</div>
        <el-form :model="ruleForm" :rules="rules" ref="formRef">
          <el-form-item prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入账号" autocomplete="off">
              <template #prepend>
                <div class="iconfont icon-zhanghaodenglu"></div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" show-password v-model="ruleForm.password" placeholder="请输入密码"
                      autocomplete="off">
              <template #prepend>
                <div class="iconfont icon-mima"></div>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="checkPass">
            <el-checkbox v-model="ruleForm.checkPass" label="记住账号"/>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" style="width: 100%" size="large" @click="loginBtn()">登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import Nprogress from 'nprogress'
import {loginData} from "@/data/loginData";
import '@/views/login/login.css'
import {mapMutations, mapState} from "vuex";
import md5 from 'js-md5'
// password: md5(this.logindata.userpwd)

export default {
  name: "login",
  data() {
    let validate = (rule, value, callback) => {
      if (rule.fullField === 'username') {
        if (!value) {
          callback(new Error('用户名不能为空'));
        } else if (!/^[a-zA-Z0-9]+$/.test(value)) {
          callback(new Error('用户名只能包含字母和数字'));
        } else {
          callback();
        }
      }
      if (rule.fullField === 'password') {
        if (!value) {
          callback(new Error('请输入密码'));
        } else if (!/^[a-zA-Z0-9]+$/.test(value)) {
          callback(new Error('密码只能包含字母和数字'));
        } else {
          callback();
        }
      }
    };
    return {
      ruleForm: {
        password: localStorage.getItem('vuetwopeoject_username'),
        username: localStorage.getItem('vuetwopeoject_username'),
        checkPass: !!localStorage.getItem('vuetwopeoject_username'),
      },
      rules: {
        password: [
          {validator: validate, trigger: 'blur'}
        ],
        username: [
          {validator: validate, trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    ...mapMutations("userStore", ["CHANGE_USERDATA", "CHANGE_MENUDATA"]),
    loginBtn(formRef = 'formRef') {
      this.$refs[formRef].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.ruleForm.checkPass ? localStorage.setItem('vuetwopeoject_username', this.ruleForm.username) : localStorage.removeItem('vuetwopeoject_username')
        //  此时发请求
        Nprogress.start()
        const timer = setTimeout(() => {
          this.CHANGE_MENUDATA(loginData.menu)
          this.CHANGE_USERDATA(loginData.user)
          this.$router.push(this.$route.query.redirect ? this.$route.query.redirect : '/')
          clearTimeout(timer)
          Nprogress.done()
        }, 1000)
      });
    },
  }
}
</script>
<style scoped lang="less">
/deep/ .el-input-group__prepend {
  background-color: white;
  width: 54px;
}
</style>